<template>
	<view class="card-box" @click="handleToDetail" :style="`color:${readTheme.defaultColor}`">
		<u-image :src="image" class="cover" mode="cover" :lazy-load="true" height="200">
			<u-loading slot="loading"></u-loading>
		</u-image>
		<view class="name u-line-1">{{ name }}</view>
		<view class="writer u-line-1">{{ writer }}</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		computed:{
			...mapGetters({
				readTheme:'readTheme'
			})
		},
		props: {
			name: {
				type: String,
				reqiured: true,
				default: '未知'
			},
			writer: {
				type: String,
				reqiured: true,
				default: '未知'
			},
			bookId: {
				type: Number,
				reqiured: true,
				default: 0
			},
			image: {
				type: String
			}
		},
		methods: {
			handleToDetail() {
				uni.navigateTo({
					url: `/pages/detail/index?bookId=${this.bookId}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-box {
		display: inline-block;
		width: 140upx;

		.cover {
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
			margin-bottom: 20upx;
		}

		.name {
			font-size: 24upx;
			font-weight: 600;
			line-height: 24upx;
			margin-bottom: 10upx;
			margin-left: 2upx;
		}

		.writer {
			font-size: 20upx;
			font-weight: 400;
			margin-left: 2upx;
		}
	}
</style>
